<template>
  <jm-modal-view :config="config" @checkData="(obj) => checkData(obj)" ref="jm_modal_view">

    <!-- ================= 弹窗 插槽 ======================= -->
    <template #dialog_slot="scope">
      <data-detail v-if="childData.checkref == 'data_detail'" 
        ref="data_detail" @close-dialog="closeDialog">
      </data-detail>

      <profit-list v-if="childData.checkref == 'profit_list'" 
        ref="profit_list">
      </profit-list>

      <bind-device-detail v-if="childData.checkref == 'bind_device'" 
        ref="bind_device" @close-dialog="closeDialog">
      </bind-device-detail>
      <!-- <data-detail2 v-if="childData.checkref == 'data_detail2'" ref="data_detail2" @close-dialog="closeDialog"></data-detail2> -->
    </template>

    <!-- 自定义 字段 处理插槽 -->
    <template #onlineStatus="scope">
      <el-tag size="small" type="success" v-if="scope.row.onlineStatus == 'online'">在线</el-tag>
      <el-tag size="small" type="error" v-else>不在线</el-tag>
    </template>
    <template #statusText="scope">
      <el-tag size="small" type="primary">{{ scope.row.statusText }}</el-tag>
    </template>
    <template #province="scope">
      {{ scope.row.province?scope.row.province:'-' }}/
      {{ scope.row.city?scope.row.city:'-' }}/
      {{ scope.row.address?scope.row.address:'-' }}
    </template>
    <template #partnerUserName="scope">
      {{ scope.row.partnerUserName?scope.row.partnerUserName:(scope.row[scope.row.showUserType]) }}
      {{ scope.row.userFlag?
        ((scope.row.showUserType == 'partnerUserName'
        ||scope.row.showUserType == 'companyUserName'
        ||scope.row.showUserType == 'adminUserName')?
        ('/'+scope.row.userName):'')
      :'' }}
    </template>
    <template #cityUserName="scope">
      {{ scope.row.cityUserName?scope.row.cityUserName:'-' }}
      {{ scope.row.userFlag?
        (scope.row.showUserType == 'cityUserName'?
        ('/'+scope.row.userName):'')
        :'' }}
    </template>
    <template #countyUserName="scope">
      {{ scope.row.countyUserName?scope.row.countyUserName:'-' }}
      {{ scope.row.userFlag?
        (scope.row.showUserType == 'countyUserName'?
        ('/'+scope.row.userName):'')
      :'' }}
    </template>

    <!-- 自定义 表格事件 处理插槽 -->
    <template #table_btn="scope">
      <el-button size="small" v-if="!scope.row.isBind" @click="bindDevice({ data: scope.row, index: scope._index, checkref: 'bind_device' })" type="success">绑定设备</el-button>
      <el-button size="small" v-else @click="unBindDevice({ data: scope.row, index: scope._index })" type="danger">解绑设备</el-button>
      <el-button size="small" @click="showProfitList({ data: scope.row, index: scope._index, checkref: 'profit_list' })">收益列表</el-button>
    </template>

    <template #easy_search_slot="scope">
      <el-select @change="advSearch()" v-model="scope.adv_search.isp" 
      style="width: 150px;margin-right: 10px;" size="small" clearable placeholder="请选择设备线路">
        <el-option label="电信" value="电信"></el-option>
        <el-option label="移动" value="移动"></el-option>
        <el-option label="联通" value="联通"></el-option>
      </el-select>
      <el-select @change="advSearch()" v-model="scope.adv_search.isMy" 
      style="width: 100px;margin-right: 10px;" size="small" placeholder="是否为我的设备">
        <el-option label="我的设备" :value="true"></el-option>
        <el-option label="所有设备" :value="false"></el-option>
      </el-select>
      <el-select @change="advSearch()" v-model="scope.adv_search.onlineStatus" 
      style="width: 100px;margin-right: 10px;" clearable size="small" placeholder="是否在线"
      :empty-values="[null, undefined]" :value-on-clear="null">
        <el-option label="在线/不在线" value=""></el-option>
        <el-option label="在线" value="online"></el-option>
        <el-option label="不在线" value="offline"></el-option>
      </el-select>
    </template>

    <!-- 自定义 弹窗 提交事件 -->
    <template #dialog_btn="scope">
      <el-button v-if="childData.checkref == 'data_detail'" type="primary" 
        @click="childDataOperation({
          checkref: 'data_detail',
          fn: 'submitData'
        })">
        保存
      </el-button>
      
      <el-button v-if="childData.checkref == 'bind_device'" type="primary" 
        @click="childDataOperation({
          checkref: 'bind_device',
          fn: 'submitData'
        })">
        绑定
      </el-button>
    </template>

    <!-- 自定义 筛选条件 插槽 -->
    <template #search_slot="scope">
      <div class="flexbox" style="margin-bottom:10px;">
        <div class="searchContent">企业名称：</div>
        <div class="searchBox" style="width:100%;">
          <el-input @input="advSearch()" placeholder="请输入企业名称" v-model="scope.adv_search.enterpriseName" size="small"></el-input>
        </div>
      </div>
      <div class="flexbox" style="margin-bottom:10px;">
        <div class="searchContent">企业名称：</div>
        <div class="searchBox" style="width:100%;">
          <el-input @input="advSearch()" placeholder="请输入企业名称" v-model="scope.adv_search.valueq" size="small"></el-input>
        </div>
      </div>
    </template>

    <!-- 自定义右键事件框 -->
    <template #contextMenu_slot="scope">
      <div class="clickitem" @click="contextMenuClick(scope.row)">
        <div class="itemleft">功能4</div>
        <div class="itemright"></div>
      </div>
    </template>

  </jm-modal-view>
</template>

<script setup>
  import JmModalView from '@/components/Jm_ModalView/JmModalView.vue'
  import DataDetail from './detail.vue'
  import ProfitList from './profitList.vue'
  import BindDeviceDetail from './bindDevice.vue'
  // import DataDetail2 from './detail2.vue'


  import { ref, nextTick, inject } from 'vue'
  
  import { useStore } from 'vuex'
  // 注入全局utils工具js
  const $utils = inject('$utils')
  // 注入全局filters工具js
  const $filters = inject('$filters')
  // 定义store
  const store = useStore()

  // 获取到的父组件给子组件的值
  const childData = ref({})
  // 定义ref值
  const data_detail = ref()
  const jm_modal_view = ref()

  const profit_list = ref()
  const bind_device = ref()

  // 自定义弹出内容ref
  // const data_detail2 = ref()
  
  // 配置模板表单数据
  const config = ref({
    detailGetData: detailGetData,
    searchDefault: {isMy: false, onlineStatus: ''},
    noAdd: true,
    breadcrumb: ['设备列表'],
    // 是否开启右键事件
    openContextMenu: false,
    // 基础增删改查配置
    operation: {
      // 获取表格数据链接
      get_data_url: '/Api/Device/GetPagedList',
      // 查询表格详情链接
      get_detaildata_url: '/Api/Device/Get',
      // 删除表格数据连接
      del_data_url: '/Api/Device/Remove',
      // 编辑列表
      checkref: 'data_detail'
    },
    // 表格内容配置
    table_config: {
      opeWidth: 250,
      noDelete: true,
      noDeleteMore: true,
      column: [
        {
          prop: 'serialNumber',
          label: '设备号',
          width: 150
        },
        {
          prop: 'belong',
          label: '设备来源',
          width: 80
        },
        {
          prop: 'province',
          label: '地址',
          slot: true,
          width: 180
        },
        {
          prop: 'isp',
          label: '设备线路',
        },
        {
          prop: 'statusText',
          label: '设备状态',
          slot: true
        },
        {
          prop: 'onlineStatus',
          label: '在线状态',
          slot: true
        },
        // {
        //   prop: 'adminUserName',
        //   label: '总部用户'
        // },
        // {
        //   prop: 'companyUserName',
        //   label: '分公司用户'
        // },
        {
          prop: 'partnerUserName',
          label: '业务经理',
          slot: true
        },
        {
          prop: 'cityUserName',
          label: '市代理',
          slot: true
        },
        {
          prop: 'countyUserName',
          label: '区代理',
          slot: true
        },
        // {
        //   prop: 'userName',
        //   label: '铺手'
        // },
        {
          prop: 'createTime',
          label: '添加时间',
          width: 150
        },
        
        {
          prop: 'updateTime',
          label: '更新时间',
          width: 150
        }
      ]
    }
    
  })

  // ============================================================================= 自定义事件区域 ====================================================================

  function detailGetData (data) {
    for (let i = 0; i < data.length; i++) {
      let userFlag = true, showUserType = ''
      if (data[i].userName == data[i].partnerUserName) {
        userFlag = false
      }
      if (data[i].userName == data[i].cityUserName) {
        userFlag = false
      }
      if (data[i].userName == data[i].countyUserName) {
        userFlag = false
      }
      if (userFlag) {
        if (data[i].countyUserName) {
          showUserType = 'countyUserName'
        }
        if (data[i].cityUserName && showUserType == '') {
          showUserType = 'cityUserName'
        }
        if (data[i].partnerUserName && showUserType == '') {
          showUserType = 'partnerUserName'
        }
      }
      if (!data[i].userName || showUserType == '') {
        if (data[i].companyUserName) {
          showUserType = 'companyUserName'
        } else {
          showUserType = 'adminUserName'
        }
      }
      data[i].userFlag = userFlag
      data[i].showUserType = showUserType
    }
    return data
  }

  async function bindDevice (obj) {
    childData.value.checkref = obj.checkref
    await jm_modal_view.value.showView()
    await nextTick()
    setDialogWidth('800px')
    setDialogMinWidth('800px')
    bind_device.value.initData({
      data: {
        deviceId: obj.data.id
      }
    })
  }
  function unBindDevice (obj) {
    $utils.post({
			url: '/Api/device/UnBind',
			params: {
				id: obj.data.id
			},
      confirm: true,
      confirmText: `是否解绑设备【${obj.data.serialNumber}】`,
      showLoading: true,
			ok: (res) => {
        $utils.message({
          showClose: true,
          center: true,
          message: '解绑成功',
          type: 'success'
        })
        jm_modal_view.value.getData()
			}
		})
  }
  async function showProfitList (obj) {
    childData.value.checkref = obj.checkref
    await jm_modal_view.value.showView()
    await nextTick()
    setDialogWidth('90%')
    setDialogMinWidth('1150px')
    profit_list.value.initData(obj)
  }

  // ================================================================================================================================================================

  // 设置弹窗宽度
  function setDialogWidth (str) {
    config.value.dialog_width = str
  }
  // 设置弹窗宽度
  function setDialogMinWidth (str) {
    config.value.dialog_min_width = str
  }
  
  // 保存数据提交方法
  function childDataOperation(obj) {
    // 自定义入参可为空
    let resData = {}
    eval(`${obj.checkref}.value.${obj.fn}({
      data: ${JSON.stringify(resData)}
    })`)
  }
  
  // 公共模板返回数据emit事件
  async function checkData(obj) {
    childData.value = obj
    await nextTick()
    const resData = obj.data
    switch (obj.checkref) {
      case 'data_detail':
        setDialogWidth('90%')
        setDialogMinWidth('1150px')
      break
      default: break;
    }
    eval(`${obj.checkref}.value.${obj.fn}({
      data: ${JSON.stringify(resData)},
      type: obj.type
    })`)
  }

  // 关闭弹窗事件
  function closeDialog(flag) {
    jm_modal_view.value.closeDialog(flag)
  }
  
  // ----------------- 右键点击选择菜单事件 -------------------------
  function contextMenuClick(item) {
    console.log(item)
    store.commit('set_pop_attr', {
      pop_show: false
    })
  }

  // 
  // function diyBtn(obj) {
  //   const sendobj = {
  //     data: obj.data,
  //     checkref: obj.checkref,
  //     fn: 'initData'
  //   }
  //   jm_modal_view.value.diyBtnFn(sendobj)
  // }
  // 高级筛选条件传入并搜索
  function advSearch() {
    // jm_modal_view.value.advSearch()
  }

</script>

<style scoped>

</style>